import React, { Component } from 'react';
// 导入分类api
import { category_list, category_subcate } from '../utils/api';
// 导入分类样式
import './Classificat.scss'
// 导入图片
import mrhf_01 from '../imgs/mrhf_01.jpg'
import mrhf_02 from '../imgs/mrhf_02.jpg'
import mrhf_03 from '../imgs/mrhf_03.jpg'
import mrhf_04 from '../imgs/mrhf_04.jpg'
import mrhf_05 from '../imgs/mrhf_05.jpg'
import mrhf_06 from '../imgs/mrhf_06.jpg'
import mrhf_07 from '../imgs/mrhf_07.jpg'
import mrhf_08 from '../imgs/mrhf_08.jpg'
import mrhf_09 from '../imgs/mrhf_09.jpg'
import mrhf_10 from '../imgs/mrhf_10.jpg'
import mrhf_11 from '../imgs/mrhf_11.jpg'
class Classificat extends Component {
    constructor(props){ //组件初始化
     super(props)
     this.state={//定义初始化状态
     currentIndex:0,
     arr:[ ]




     }
    }
    componentDidMount(){
        // 发送一级分类请求
        category_list().then((res)=>{
          console.log(res.data);
            this.setState(this.state.arr= res.data.list)
        //   console.log('222  '+this.state.arr.list);
        })
       //发送二级分类请求
        category_subcate({ id: 281435 }).then((res)=>{
           console.log(res.data);
            this.setState({ id:res.data.subcate.subcategory})
        })
         console.log("444  "+this.state.id);
    }
    handleClick(index){
        this.setState({
            
            currentIndex:index
        },()=>{
            console.log(this.state.currentIndex);
        })
    }

    render() {
        return (
            <div className='app'>
                <div className="left">
                   {
              // 渲染左侧商品列表
                    this.state.arr.map((item,index)=>{
                     return(
                        <div className={`btn ${this.state.currentIndex==index?'active':''}`} 
                        onClick={()=>{
                            this.handleClick(index)
                        }}>{item.name}</div>
                     )
                    })
                   }
                </div>
                <div className="right">
                  {
                // 渲染右侧商品列表
                    // this.state.arr.map((item,index)=>{
                    //   return(
                    //   <div className='right1'>
                    //           <img src={item.pic} alt="" />
                    //           <div className='spmc'>{item.name}</div>
                    //   </div>
                    //   )
                    // })
                  }

                </div>
            </div>
        );
    }
}

export default Classificat;